<template>
    <div class="sku-select">
        <div class="sku-type">
            <el-radio v-model="radio" label="1">单规格</el-radio>
<!--            <el-radio v-model="radio" label="2">多规格</el-radio>-->
            <el-form ref="form" :model="form" label-width="80px" :inline="true">
<!--                <el-form-item label="图片">-->
<!--                    <file-list :value="item.pic" :limit="1"></file-list>-->
<!--                </el-form-item>-->
                <el-form-item label="售价(拼团价)">
                    <el-input v-model="form.endprice" size="small" @change="onChange"></el-input>
                </el-form-item>
                <el-form-item label="成本价">
                    <el-input v-model="form.costprice" size="small" @change="onChange"></el-input>
                </el-form-item>
                <el-form-item label="原价">
                    <el-input v-model="form.price" size="small" @change="onChange"></el-input>
                </el-form-item>
                <el-form-item label="库存">
                    <el-input v-model="form.surplus" size="small" @change="onChange"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
	import fileList from '@/components/feilList';
	export default {
		name: 'SkuSelect',
        components: {
			fileList
        },
		props: {
			value: {
				type: String,
				default: () => {
					return '';
				}
			}
		},
        data() {
			return {
				radio: '1',
				form: {
					endprice: '',
					costprice: '',
					price: '',
					surplus: '',
				}
            }
        },
        methods: {
			onChange() {
				this.$emit('input', JSON.stringify([this.form]));
            }
        },
		watch: {
			value(val) {
				if (!val) {
					return;
				}
				this.form = JSON.parse(this.value)[0];
				// this.form.endprice = JSON.parse(this.value)[0].endprice;
				// this.form.costprice = JSON.parse(this.value)[0].costprice;
				// this.form.price = JSON.parse(this.value)[0].price;
				// this.form.surplus = JSON.parse(this.value)[0].surplus;
			}
		},
	};
</script>

<style lang="scss" scoped>
.sku-select {
    .sku-type {
        /*flexBox(flex-start);*/
    }
    .sku-table {
        border: 1px solid #e6e6e6;
        td {
            border: 1px solid #e6e6e6;
        }
    }
    /deep/.el-radio {
        margin-bottom: 10px;
    }
    /deep/ .el-form {
        .el-form-item {
            margin: 0;
            .el-form-item__label {
                display: block;
                width: 100%!important;
                text-align: left;
                background: #f2f2f2;
                border: 1px solid #e6e6e6;
                padding: 0 10px;
                border-right: none;
            }
            .el-form-item__content {
                padding: 10px;
                border: 1px solid #e6e6e6;
                border-top: none;
                border-right: none;
                .el-input {
                    width: 80px;
                }
            }
            &:last-child {
                .el-form-item__label, .el-form-item__content {
                    border-right: 1px solid #e6e6e6;
                }
            }
        }
    }
}
</style>